<template>
  <view>
    <view class="header">
      <view class="search yd-flex-h-hC-vC">
        <image class="search__icon" src="~@/static/searchIcon.png"/>
        <input class="yd-flex-1" placeholder="搜索商铺名称" />
        <text>搜索</text>
      </view>
    </view>
    <view class="content">
      <view @tap="detail(item)" v-for="(item, index) in shopData" :key="index" class="item">
        <image class="item__img" src="http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10146be35db9451294672ed3a98992f9~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
        <view class="item__info">
          <view class="yd-flex-1">
            <view class="item__name">肯德基（惠明店）</view>
            <view class="item__address">地址：河南省信阳市光山县紫水街道惠民中心广场36号楼</view>
          </view>
          <image class="item__arrow" src="~@/static/shop/arrow.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopData: [
        {},
        {},
        {},
      ]
    }
  },
  methods: {
    detail(item) {
      uni.navigateTo({
        url: '../detail/detail'
      })
    }
  }
}
</script>

<style lang="scss">
.header {
  width: 100%;
  height: 112rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 24rpx;
  border-bottom: 2rpx solid #eee;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 0;
}
.search {
  width: 100%;
  height: 88rpx;
  background-color: #F5F5F5;
  border-radius: 14rpx;
  color: #333333;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 0 28rpx 0 24rpx;
  .yd-flex-1 {
    margin-right: 24rpx;
  }
}
.search__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.content {
  background-color: #fff;
}
.item {
  box-sizing: border-box;
  padding: 24rpx 0 0 24rpx;
  color: #666;
  font-size: 24rpx;
  display: flex;
}
.item__img {
  width: 176rpx;
  height: 144rpx;
  border-radius: 10rpx;
  margin-right: 24rpx;
  margin-bottom: 24rpx;
}
.item__info {
  flex: 1;
  border-bottom: 2rpx solid #EAEBEC;
  display: flex;
  align-items: center;
}
.item:last-child .item__info {
  border-bottom: none;
}
.item__name {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.item__address {
  margin-bottom: 20rpx;
}
.item__arrow {
  width: 44rpx;
  min-width: 44rpx;
  height: 88rpx;
  margin-right: 24rpx;
  margin-left: 80rpx;
}
</style>
